<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>课程数据管理</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getCourseList" @keyup.enter="getCourseList">
            <el-button slot="append" icon="el-icon-search" @click="getCourseList"></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 用户列表区域 -->
      <el-table :data="courselist" border stripe>
        <el-table-column label="课程编号" prop="id"></el-table-column>
        <el-table-column label="课程名称" prop="course_name"></el-table-column>
        <el-table-column label="课程介绍" prop="introduce"></el-table-column>
        <el-table-column label="幼儿要求" prop="requirement"></el-table-column>
        <el-table-column label="合作单位" prop="co_name"></el-table-column>
        <el-table-column label="课程状态" prop="status"></el-table-column>
        <el-table-column label="创建人" prop="username"></el-table-column>
        <el-table-column label="基本费(元)" prop="teach_fee"></el-table-column>
        <el-table-column label="材料费(元)" prop="material_fee"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
                     :page-sizes="[1, 2, 5, 10]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </el-card>


    <!-- 修改用户的对话框 -->
    <el-dialog title="修改课程信息" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed">
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="课程编号">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="课程名称" prop="course_name">
          <el-input v-model="editForm.course_name"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍" prop="introduce">
          <el-input v-model="editForm.introduce"></el-input>
        </el-form-item>
        <el-form-item label="幼儿要求" prop="requirement">
          <el-input v-model="editForm.requirement"></el-input>
        </el-form-item>
        <el-form-item label="合作单位" prop="cooperation_id">
          <el-select v-model="editForm.cooperation_id" placeholder="合作单位">
            <el-option
              v-for="item in ConstitutionList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人" prop="username">
          <el-input v-model="editForm.username" disabled></el-input>
        </el-form-item>
        <el-form-item label="基本费(元)" prop="teach_fee">
          <el-input v-model="editForm.teach_fee"></el-input>
        </el-form-item>
        <el-form-item label="材料费(元)" prop="material_fee">
          <el-input v-model="editForm.material_fee"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    export default {
        data() {
            return {
                // 获取用户列表的参数对象
                queryInfo: {
                    query: '',
                    // 当前的页数
                    pagenum: 1,
                    // 当前每页显示多少条数据
                    pagesize: 2
                },
                courselist: [],
                ConstitutionList:[],
                total: 0,
                // 控制修改用户对话框的显示与隐藏
                editDialogVisible: false,
                // 查询到的用户信息对象
                editForm: {
                    id:'',
                    course_name: '',
                    introduce: '',
                    cooperation_id: '' ,
                    requirement: '',
                    status:'',
                    teach_fee:'',
                    material_fee:'',
                    username:'',
                    co_name:''
                },
                // 修改表单的验证规则对象
                editFormRules: {
                    email: {
                        required: true,
                        message: '请输入用户邮箱',
                        trigger: 'blur'
                    },
                    mobile: {
                        required: true,
                        message: '请输入用户手机',
                        trigger: 'blur'
                    }
                }
            }
        },
        created() {
            this.getCourseList()
            this.getConstitutionList()
        },
        methods: {
            async getCourseList() {
                const { data: res } = await this.$http.get('course', {
                  params: this.queryInfo
                })
                if (res.code !== 200) {
                  return this.$message.error('获取用户列表失败！')
                }
                this.courselist = res.data.data

                this.total = res.data.count
                console.log(this.courselist)
            },
            async getConstitutionList() {
              const { data: res } = await this.$http.get('cooperation/list')
              if (res.code !== 200) {
                return this.$message.error('获取用户列表失败！')
              }
              this.ConstitutionList = res.data

            },
            // 监听 pagesize 改变的事件
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize
                this.getCourseList()
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage
                this.getCourseList()
            },
           async showEditDialog(courseId){

              const { data: res } = await this.$http.get('course/'+courseId)
              if (res.code !== 200) {
                  return this.$message.error('查询用户信息失败！')
              }

              this.editForm = res.data

              this.editDialogVisible = true
            },
            // 监听修改用户对话框的关闭事件
            editDialogClosed() {
                this.$refs.editFormRef.resetFields()
            },
            // 修改用户信息并提交
            editUserInfo() {
              let form = new FormData()
              form.append('id',this.editForm.id)
              form.append('course_name',this.editForm.course_name)
              form.append('introduce',this.editForm.introduce)
              form.append('cooperation_id',this.editForm.cooperation_id)
              form.append('requirement',this.editForm.requirement)
              form.append('teach_fee',this.editForm.teach_fee)
              form.append('material_fee',this.editForm.material_fee)
              form.append('co_name',this.editForm.co_name)
                this.$refs.editFormRef.validate(async valid => {
                    if (!valid) return
                    const {
                      data: res
                    } = await this.$http.put(
                      'course/',form
                    )

                    if (res.code !== 200) {
                      return this.$message.error('更新用户信息失败！')
                    }

                    // 关闭对话框
                    this.editDialogVisible = false
                    // 刷新数据列表
                    this.getCourseList()
                    // 提示修改成功
                    this.$message.success('更新用户信息成功！')
                })
            },
            // 根据Id删除对应的用户信息
            async removeUserById(id) {
                // 弹框询问用户是否删除数据
                const confirmResult = await this.$confirm(
                    '此操作将永久删除该课程, 是否继续?',
                    '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).catch(err => err)
                if (confirmResult !== 'confirm') {
                    return this.$message.info('已取消删除')
                }

                const {
                    data: res
                } = await this.$http.delete('course/' + id)
                if (res.code !== 200) {
                    return this.$message.error('删除课程失败！')
                }

                this.$message.success('删除课程成功！')
                this.getCourseList()
            }
        }
    }
</script>

<style lang="less" scoped>
</style>
